<template>
  <div class="ThreeRow-container">
    <div class="left">
      <lineChart2 ref="lineChart2" />
    </div>
    <div class="right">
      <div class="right-top">
        <smallRingChart />
        <smallRingChart />
        <smallRingChart />
      </div>
      <div class="right-bottom">
        <smallRingChart />
        <smallRingChart />
        <smallRingChart />
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data(){
    return{

    }
  },
  methods:{
    stop(){
      this.$refs.lineChart2.flag = true
      this.$refs.lineChart2.handleClickStop()
    }
  }
}
</script>


<style lang="scss" scoped>
.ThreeRow-container {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  padding-bottom: 100px;
  height: 500px;
  .left {
    flex: 3;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background: #ffffff;
  }
  .right {
    flex: 1;
    margin-left: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background: #ffffff;
    .right-top {
      overflow: hidden;
      display: flex;
      flex-direction: row;
      margin-top: 20px;
    }
    .right-bottom {
      overflow: hidden;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
    }
  }
}
</style>
